<template>
	<view>
		<view class="deli-box" v-if="state">
			<image :src="list.result.logo" mode="widthFix" class="user-head"></image>
			<view class="user-name">{{list.result.expName}}</view>
			<view class="user-mobile">{{list.result.courierPhone}}</view>
			<view class="delivery-time">
				<view class="itme-item" v-for="(item,key) in list.result.list">
					<view class="time-icon" v-if="key > 0"></view>
					<view class="time-icon time-icon-last" v-else><i class="icon">&#xe619;</i></view>
					<view class="time-line" v-if="key < list.result.list.length - 1"></view>
					<view class="time-content">
						<view :class="key == 0 ? 'time-title time-title-avtive' : 'time-title'">{{item.status}}</view>
						<view class="time-time">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="error-msg" v-else>{{error_msg}}</view>
		<web-load v-if="loading"></web-load>
	</view>
</template>

<script>
	import webLoad from '../../components/unit/loading.vue';
	
	export default{
		components:{ webLoad  },
		data(){
			return {
				loading:true,
				list : {
					result : {
						list : []
					}
				},
				state : 0,
				order_id : 0,
				error_msg : ''
			}
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.getData();
		},
		methods:{
			//获取物流信息
			getData(){
				this.ajax('order/orderDelivery',{
					data:{id: this.order_id},
					success:(res) => {
						this.loading = false;
						if(res.code) {
							this.state = 1;
							this.list = res.msg;
							console.log(this.list);
						} else {
							this.state = 0;
							this.error_msg = res.msg;
						}
					}
				});
			}
		}
	}
</script>

<style>
	.deli-box{background: url('https://shop-made.oss-cn-hangzhou.aliyuncs.com/h5/delivery-bg.png');background-size:100%;background-repeat: no-repeat;}
	.deli-box::before{content: '';display: table;}
	.user-head{width: 120upx;height: 120upx;display: block;margin:auto;border-radius: 50%;margin-top:40upx}
	.user-name{text-align: center;font-size: 32upx;margin-top:10upx;}
	.user-mobile{text-align: center;color:#999;margin-top: 10upx;}
	.delivery-time{margin-top:50upx}
	.itme-item{position: relative;width: calc(100% - 200upx);margin: auto;margin-top:20upx;padding-left:70upx;padding-bottom: 20upx;}
	.time-icon{position: absolute;width: 35upx;height: 35upx;border:1upx solid #E1E1E1;border-radius: 50%;top:8upx;left:-20upx;}
	.time-line{position: absolute;width: 1px;height: calc(100% - 35upx);background: #E1E1E1;top:50upx;left:0upx;}
	.time-title{color:#999;}
	.time-time{color:#999;margin-top:20upx;font-size: 28upx;}
	.time-icon-last{background: #000000;color: #FFFFFF;text-align: center;line-height: 25upx;}
	.time-icon-last i{color:#fff;font-size: 20upx;font-weight: bold;}
	.time-title-avtive{color:#333;}
	.error-msg{text-align: center;padding-top: 100upx;}
</style>
